html, body, div, dl, dt, dd, ul, ol, li, p, h1, h2 ,h3, h4, h5, h6, a { padding: 0; margin: 0; text-decoration: none; list-style: none; }
#wrap { height: 100%; }

#nav { position: fixed; width: 255px; background: rgba(0, 0, 0, 0.2); background-size: cover; height: 100%; }
#nav .bg { position: absolute; width: 255px; height: 100%; background: inherit; filter: blur(5px); }
#nav .portrait { position: relative; padding: 70px 20px 0 20px; text-align: center; width: 215px; }
#nav .portrait img { width: 100px; height: 100px; border-radius: 100%; border: rgba(255, 255, 255, 0.3) 5px solid; }
#nav .portrait span { display: block; padding: 10px 50px; color: #fff; font-size: 20px; text-decoration: underline; }
#nav .menu { position: relative; padding: 20px; width: 215px; }
#nav .menu > li { border-bottom: #eee 1px solid; }
#nav .menu > li > a { font-size: 15px; color: #fff; padding: 12px 15px; display: block; }
#nav .menu > li > a:hover { background: rgba(255, 255, 255, 0.2); }


#btn { position: fixed; left: 20px; top: 20px; width: 30px; height: 25px; display: block; z-index: 1; cursor: pointer; }
#btn .bar,
#btn .bar:after,
#btn .bar:before { width: 30px; height: 5px; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); }
#btn .bar { position: relative; transform: translateY(10px); background: white; transition: all 0ms 300ms; }
#btn .bar:before { content: ""; position: absolute; left: 0; bottom: 10px; background: white; transition: bottom 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1), transform 300ms cubic-bezier(0.23, 1, 0.32, 1); }
#btn .bar:after { content: ""; position: absolute; left: 0; top: 10px; background: white; transition: top 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1), transform 300ms cubic-bezier(0.23, 1, 0.32, 1); }
#btn.animate .bar { background: rgba(255, 255, 255, 0); box-shadow: none; }
#btn.animate .bar:after { top: 0; transform: rotate(45deg); transition: top 300ms cubic-bezier(0.23, 1, 0.32, 1), transform 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1); }
#btn.animate .bar:before { bottom: 0; transform: rotate(-45deg); transition: bottom 300ms cubic-bezier(0.23, 1, 0.32, 1), transform 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1); }


.fp-viewing-3 #nextpage { display: none; }
.NavOn #nextpage { display: none; }
#nextpage { position: fixed; bottom: 0; left: calc(50% - 12px); width: 24px; height: 50px; }
#nextpage i { position: absolute; width: 24px; height: 3px; opacity: 0; transform: scale3d(0.5, 0.5, 0.5); animation: move 3s ease-out infinite; }
#nextpage i:first-child { animation: move 3s ease-out 1s infinite; }
#nextpage i:nth-child(2) { animation: move 3s ease-out 2s infinite; }
#nextpage i:before,
#nextpage i:after { content: ' '; position: absolute; top: 0; height: 100%; width: 51%; background: rgba(136, 136, 136, 0.4); }
#nextpage i:before { left: 0; transform: skew(0deg, 30deg); }
#nextpage i:after { right: 0; width: 50%; transform: skew(0deg, -30deg); }
@keyframes move {
  25% {
    opacity: 1;
  }
  33% {
    opacity: 1;
    transform: translateY(20px);
  }
  67% {
    opacity: 1;
    transform: translateY(28px);
  }
  100% {
    opacity: 0;
    transform: translateY(40px) scale3d(0.5, 0.5, 0.5);
  }
}
#content { transition: .5s transform; }
.NavOn #content { transform: translateX(255px) !important; }
#content img { max-width: 100%; }
.bg1 { background: rgba(0, 0, 0, 0.2) no-repeat center; background-size: cover; }